<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用配置</title>
    <script src="js/echarts.js"></script>
</head>
<body>
<div class="box" style="width: 500px; height: 500px"></div>
<script>
    var myEcharts=echarts.init(document.getElementsByClassName("box")[0])
    var xDataArr=["孙悟空","猪八戒","阎王","玉皇大帝","太上老君"]
    var yDataArr=[500,300,100,665,688]
    //通用配置项---所有图表都可以用
    option={
        //title标题---表示为对象：样式、边框、位置
        title:{
          text:"各路大仙年龄"
//样式textStyle  控制标题的样式:color、fontStyle、fontSize
          ,textStyle:{
              color: "#e4393c"  //京东红
              ,fontStyle:'italic'  //风格：倾斜
              ,fontSize: "28"
          }
// 边框 borderWidth、borderColor、borderRadius
          ,borderWidth: "8"  //设置边框宽度
          ,borderColor:"#e4393c"
          ,borderRadius: "10"   //用法：？原因
          ,left:100
          ,top:100
        }
        ,tooltip:{
        //trigger:"item"
       trigger:"axis"
        ,triggerOn:"mousemove"
        }
        //X轴
        ,xAxis: { type:"category"   //类别
            ,data:xDataArr
        }
        //Y轴
        ,yAxis: {
            type:"value"   //在series设置Y轴数据
        }
        //系列:折线图、Y轴数据显示出来
        ,series: {
            name: "年龄"
            ,type:"line"
            ,data:yDataArr
        }
    }
    myEcharts.setOption(option)
</script>
</body>
</html>